@import url('color.css');

/*
App Showcase
Created: 04/2011
Version: 1.1
By: myTheme at ThemeForest.net
http://themeforest.net/user/myTheme


01.....LAYOUT
02.....INTRO
03.....CONTENT
04.....SIDEBAR
05.....FORMS
06.....MISC
*/

body {background-image:url(../img/bg/body.png);font:13px/20px Arial,sans-serif;padding:20px 0 40px 0;}
* {margin:0;padding:0;}
img, form fieldset {border:none;}
:focus {outline:0;}


/*
01. LAYOUT  -----------------------------*/

#intro {background:url(../img/bg/transparent-white-004.png);}
#intro-inner {width:640px;padding:60px 0 30px 300px;margin:0 auto;position:relative;}
#wrapper {width:940px;margin:100px auto 0 auto;position:relative;}
#content {width:560px;float:left;clear:both;padding:40px 40px 20px 40px;background-image:url(../img/bg/content.png);background-repeat:repeat-x;}
#sidebar {width:260px;float:right;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}


/*
02. INTRO  -------------------------------------*/

/* logo and intro paragraph */
h1#logo {text-indent:-9999px;background:url(../img/bg/logo.png);width:500px;height:80px;}
#intro-inner p {font-size:15px;width:580px;margin-top:10px;}

/* features list */
ul#features {width:640px;padding:20px 0 0 20px;margin-left:-20px;background:url(../img/bg/hr.png) no-repeat;}
ul#features li {float:left;font-size:12px;width:300px;margin:0 20px 15px 0;}
ul#features li strong {display:block;font-size:14px;}
ul#features li img {vertical-align:middle;margin:0 6px 20px 0;float:left;}

/* phone */
#phone {position:absolute;left:-25px;top:30px;width:323px;height:448px;}
#phone a {position:absolute;left:131px;top:184px;width:60px;height:60px;background:url(../img/bg/play.png);text-indent:-9999px;}

/* iphone */
#iphone #phone {background:url(../img/bg/iphone.png);}
#iphone #phone img {position:absolute;left:70px;top:74px;width:184px;height:276px;}

/* android */
#android #phone {background:url(../img/bg/android.png);}
#android #phone img {position:absolute;left:71px;top:56px;width:180px;height:300px;}


/*
03. CONTENT  -------------------------------------*/

/* tabs */
.tabs-hide {display:none;}
.tabs-container {float:left;clear:both;}
.tabs-loading em {background:url(../img/bg/loading.gif) no-repeat 0 50%;}

/* main navigation */
#navigation {position:absolute;left:30px;top:-60px;}
#navigation li {float:left;position:relative;display:inline;font-size:13px;margin-right:10px;}
#navigation li a {padding:0 10px;line-height:40px;height:40px;display:block;font-weight:normal;}
#navigation li a:hover {text-decoration:underline;}
#navigation li.tabs-selected a {color:#666;background:url(../img/bg/tabs-selected.png) no-repeat 50% 100%;}

/* typography  */
h2 {font-size:20px;font-weight:normal;margin-bottom:-10px;clear:both;}
h3 {font-size:17px;font-weight:normal;margin:30px 0 -10px;clear:both;}
h3 small {font-size:17px;color:#999;}

p, blockquote, ul, ol, table, form {margin:20px 0;}
p img {float:left;margin:0 20px 20px 0;}
p img.right {float:right;margin:0 0 20px 20px;}
ul {list-style:none;}
.ul {list-style:disc;margin-left:20px;}

a {font-weight:bold;text-decoration:none;}
a:hover {text-decoration:underline;}

blockquote p {color:#666;background:url(../img/bg/blockquote.png) no-repeat;padding-left:20px;}

/* tour  */
.tour {margin-top:0px;}
.tour li {float:left;clear:both;padding-top:20px;border-top:1px solid #e8e8e8;width:100%;}
.tour li:first-child {padding-top:0;border:0;}
.tour li img {float:left;margin:0 20px 20px 0;}
.tour li h2 {float:left;margin:0 0 -15px;clear:none;}
.tour li p {float:left;width:400px;}

/* screenshots  */
ul.screenshots {width:600px;margin-top:-20px;}
ul.screenshots li {background:#666;float:left;width:160px;margin:20px 40px 20px 0;position:relative;}
ul.screenshots li img {float:left;}

/* version history  */
ul.updates li {color:#666;border-bottom:1px solid #eee;}
ul.updates li span {font-size:11px;padding:0 3px;margin-right:4px;}
ul.updates li span.new {background:#D5EFC2;}
ul.updates li span.fixed {background:#FFE25F;}
ul.updates li span.misc {background:#9FC2FF;}


/*
04. SIDEBAR ----------------------------------*/

#sidebar h3 {font-size:18px;background:url(../img/bg/hr.png) 100% 50% no-repeat;}
#sidebar h3 span {padding-right:10px;}

#buy {text-indent:-9999px;display:block;float:left;width:210px;height:90px;margin:-10px 0 20px -10px;padding-top:5px;}
#android #buy {background:url(../img/bg/buy-android.png);}
#iphone #buy {background:url(../img/bg/buy-iphone.png);}

#social li {display:inline;}
#social li a {color:#999;font-weight:normal;width:24px;height:24px;float:left;margin-right:5px;text-indent:-9999px;}
#social li a#twitter {background:url(../img/icons/twitter.png) no-repeat 0 50%;}
#social li a#facebook {background:url(../img/icons/facebook.png) no-repeat 0 50%;}
#social li a#flickr {background:url(../img/icons/flickr.png) no-repeat 0 50%;}
#social li a#rss {background:url(../img/icons/rss.png) no-repeat 0 50%;}
#social li a#dribbble {background:url(../img/icons/dribbble.png) no-repeat 0 50%;}

#copyright {font-size:12px;padding-top:20px;font-size:11px;clear:both;}


/*
05. FORMS ----------------------------------*/

form label {color:#666;clear:both;display:block;}
form label.error {background:url(../img/bg/error.png) no-repeat 0 50%;padding-left:10px;color:#DF2953;font-size:11px;margin:-18px 0 20px 10px;}
form input.error, form textarea.error {background:#FFEFF1;border:2px solid #FFBFC9;}
form input, form textarea {background:#eee;border:0;color:#666;font:15px Arial,sans-serif;padding:6px;margin-bottom:20px;display:block;width:220px;border:2px solid #fff;}
#sidebar input {border:0;}
form textarea {width:450px;overflow:auto;padding:9px;height:160px;line-height:20px;}

button {display:inline-block;padding:3px 20px 3px 12px;text-align:center;font:normal 17px Arial,sans-serif;color:#fff;cursor:pointer;clear:both;background-image:url(../img/bg/button.png);background-position:100% 50%;background-repeat:no-repeat;border:0;width:auto;overflow:visible;}
button:hover {background-image:url(../img/bg/button-hover.png);text-decoration:none;}


/*
06. MISC  -----------------------*/

/* tipsy tooltips  */
.tipsy {padding:5px;font-size:14px;background:url(../img/bg/tipsy.png) no-repeat;}
.tipsy-inner {padding:8px;background:#171717;color:#fff;max-width:200px;text-align:center;line-height:22px;font-weight:bold;}
.tipsy-inner span {font-size:11px;line-height:18px;display:block;color:#ddd;font-weight:normal;}
.tipsy-south {background-position:50% 100%;}

/* borders */
input, textarea, button, .button, .tipsy-inner, ul.updates li span {-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#content  {-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}

/* box-shadows */
#content {-webkit-box-shadow:rgba(0,0,0,0.6) 0 0 10px;-moz-box-shadow:rgba(0,0,0,0.6) 0 0 10px;box-shadow:rgba(0,0,0,0.6) 0 0 10px;}
input, textarea {-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset;box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset;}

/* text-shadows */
#intro-inner, #sidebar, button {text-shadow:rgba(0,0,0,0.6) 0 1px 1px;}

/* transitions */
#navigation a {-webkit-transition:color .4s ease;-moz-transition:color .4s ease;-o-transition:color .4s ease;transition:color .4s ease;}